<template>
  <el-dialog :visible="dialogVisible" ref="ph_zk" class="ph_zk">
    <el-form class="dialog-main">
      <el-form-item label="名称:">
        <el-input v-model="form.qualityControlName"></el-input>
      </el-form-item>
      <el-form-item label="检测范围:" class="range">
        <el-input-number
          v-model="form.qualityMin"
          :precision="1"
          :min="0"
          :controls="false"
          placeholder="最小值"
        ></el-input-number>
        <span>-</span>
        <el-input-number
          v-model="form.qualityMax"
          :min="0"
          :max="99"
          :precision="1"
          :controls="false"
          placeholder="最大值"
          class="second"
        ></el-input-number>
      </el-form-item>
      <!-- <el-form-item label="操作日期:">
        <el-date-picker
          v-model="form.addTime"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="所属科室:" class="lastChildren">
        <el-select v-model="form.departmentId" placeholder="请选择科室">
          <el-option v-for="item of departmentlist" :key="item.id" :label="item.departmentName" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="danger" @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="sendParameter">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      form: {
        qualityControlName: "", //质控批号名称
        qualityMin: "", //最小值
        qualityMax: "", //最大值
        departmentId: "", //科室
      },
      dialogVisible: false,
    };
  },
  props: {
    // 控制弹框显示关闭
    activeDialog_zk: {
      type: Boolean,
      required: true,
    },
    departmentlist: {
      type: Array,
      required: true,
    },
  },
  mounted() {
    if (this.activeDialog_zk) {
      this.dialogVisible = true;
    }
  },
  methods: {
    // 关闭弹框
    closeDialog() {
      this.dialogVisible = false;
      this.$parent.openDialog(false);
    },
    // 用户添加数据传给父组件,发送ajax
    sendParameter() {
      this.$parent.addquality(this.form);
    },
  },
};
</script>

<style lang="scss" scoped>
.ph_zk {
  & >>> .el-dialog {
    max-width: 800px;
    .el-dialog__header {
      .el-dialog__headerbtn {
        display: none;
      }
    }
    .dialog-main {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .el-form-item {
        width: 45%;
        display: flex;
        justify-content: center;
        align-items: center;
        .el-form-item__label {
          text-align: left;
          width: 100px;
          margin: 0;
        }
        .el-input {
          width: 180px;
        }
      }
      .range {
        // background-color: yellowgreen;
        .el-form-item__content {
          display: flex;
          justify-content: space-between;
          span {
            display: block;
            width: 20px;
            text-align: center;
          }
          .el-input-number {
            width: 80px;
            .el-input {
              width: 80px;
              .el-input__inner {
                width: 80px;
              }
            }
          }
        }
      }
      @media screen and (max-width: 1196px) {
        .el-form-item {
          width: 100%;
        }
      }
    }
    .dialog-footer {
      text-align: center;
    }
  }
}
</style>